import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TextInput,
    Alert
} from 'react-native'

const {width, height} = Dimensions.get('window');
const widthOfMargin = width * 0.05;
export default class LoginLeaf extends Component<{}> {
    constructor(props) {
        super(props);
        this.state = {
            inputNumber: '',
            inputPasswd: ''
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <TextInput style={styles.textInputStyle}
                           placeholder='请输入手机号'
                           onChangeText={inputNumber => this.setState({inputNumber})}/>
                <TextInput style={styles.textInputStyle}
                           placeholder='请输入密码'
                           secureTextEntry={true}
                           onChangeText={inputPasswd => this.setState({inputPasswd})}/>
                <Text style={styles.bigTextPrompt}
                      onPress={() => this.userPressConfirm()}>确定</Text>
                <Text style={styles.bigTextPrompt}
                      onPress={() => this.userPressConfirm1()}>Alert</Text>
                <Text style={styles.bigTextPrompt}
                      onPress={() => this.userPressAddrBook()}>通讯录</Text>
            </View>
        );
    }

    userPressConfirm() {
        this.props.onLoginPressed(this.state.inputNumber, this.state.inputPasswd);
    }

    userPressConfirm1() {
        Alert.alert(
            '登录提示',
            '您确定使用' + this.state.inputNumber + "进行登录吗？",
            [
                {
                    text: '我知道了', style: 'default', onPress: () => {
                    console.log("快，确定一下。");
                    this.userPressConfirm();
                }
                },
                {
                    text: '取消了吧', style: 'cancel', onPress: () => {
                    console.warn("赶紧取消了吧~")
                }
                },
                {
                    text: '手机炸了', style: 'destructive', onPress: () => {
                    console.error("炸了手机吧！")
                }
                }
            ],
            {cancelable: false} // 禁止Android手机点击非Alert区域，直接隐藏掉弹窗。
        );
    }

    userPressAddrBook() {
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    textInputStyle: {
        width: 200,
        height: 44,
        margin: widthOfMargin,
        backgroundColor: '#537741',
        fontSize: 20,
        textAlign: 'left'
    },
    bigTextPrompt: {
        width: 200,
        height: 44,
        margin: widthOfMargin,
        backgroundColor: '#1746cd',
        color: 'white',
        textAlign: 'center',
        fontSize: 30
    }
});
